<template>
	<view class="xmgl">
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" class="tabs"></u-tabs>
		
		<view class="search_view">
			<u-search placeholder="请输入关键词" v-model="keyword" @change='searchList' :show-action='false'></u-search>
		</view>
		
		<view class="info" v-for="(item, index) in xmglArr" :key="index" @tap="toXq(item)">
			<view class="info_header" v-if="current === 0 || current === 1 || current === 3">
				<view>{{ item.itemName }}</view>
				<view v-if="item.itemStatus === '10'" @tap.stop="toJdxx()">未审核</view>
				<view v-if="item.itemStatus === '11'" @tap.stop="toJdxx()">审核通过</view>
				<view v-if="item.itemStatus === '12'" @tap.stop="toJdxx()">退回</view>
				<view v-if="item.itemStatus === '20'" @tap.stop="toJdxx()">正常</view>
				<view v-if="item.itemStatus === '21'" @tap.stop="toJdxx()">超前</view>
				<view v-if="item.itemStatus === '22'" @tap.stop="toJdxx()">滞后</view>
				<view v-if="item.itemStatus === '23'" @tap.stop="toJdxx()">督查</view>
			</view>
			<view class="info_header" v-if="current === 2">
				<view>{{ item.itemCode_dictText }}</view>
				<view v-if="item.subProcessStatus === '0'" @tap.stop="toJdxx()">未开始</view>
				<view v-if="item.subProcessStatus === '1'" @tap.stop="toJdxx()">进行中</view>
				<view v-if="item.subProcessStatus === '2'" @tap.stop="toJdxx()">已完成</view>
				<view v-if="item.subProcessStatus === '3'" @tap.stop="toJdxx()">暂停</view>
				<view v-if="item.subProcessStatus === '4'" @tap.stop="toJdxx()">未配置节点</view>
				<view v-if="item.subProcessStatus === '5'" @tap.stop="toJdxx()">待管理员审核</view>
			</view>
			
			<view v-if="current === 0 || current === 1">
				<view class="item">
					<view>责任单位</view>
					<view>{{ item.resDeptName }}</view>
				</view>
				<view class="item">
					<view>督查组</view>
					<view>{{ item.supervision_dictText === 'null' ? '暂未分配' : item.supervision_dictText  }}</view>
				</view>
				<view class="item">
					<view>五个一批</view>
					<view>{{ item.fiveOne_dictText === 'null' ? '暂未分配' : item.supervision_dictText }}</view>
				</view>
			</view>

			<view v-if="current === 2">
				<view class="item">
					<view>开始时间</view>
					<view>{{ item.factBeginDate }}</view>
				</view>
				<view class="item">
					<view>完成年度任务</view>
					<view>{{ item.finishYearPercent }}%</view>
				</view>
				<view class="item">
					<view>完成全部任务</view>
					<view>{{ item.finishAllPercent }}%</view>
				</view>
			</view>
			
			<view v-if="current === 3">
				<view class="item">
					<view>开始时间</view>
					<view>{{ item.factBeginDate }}</view>
				</view>
				<view class="item">
					<view>竣工时间</view>
					<view>{{ item.factEndDate }}</view>
				</view>
				<view class="item">
					<view>总用时</view>
					<view>{{ item.factTime }}</view>
				</view>
			</view>
			
			<view v-for="(ite,ind) in item.children" class="itemChildren">
				<view class="item">
					<view>当前节点</view>
					<view>{{ ite.nodeName }}</view>
				</view>
				<view class="item">
					<view>实际用时</view>
					<view>{{ ite.factTime }}</view>
				</view>
				<view class="item">
					<view>节点状态</view>
					<view>{{ ite.nodeDetail }}</view>
				</view>
				<view class="item">
					<view>预计结束时间</view>
					<view>{{ ite.planStartDate }}</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="xmglstatus" :icon-type="iconType" :load-text="loadText"></u-loadmore>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
	import { xmglList } from "@/request/zdxm.js"
	export default {
		data() {
			return {
				keyword: '',
				scrollTop: 0,
				list: [{
						name: "预备",
					},
					{
						name: "前期",
					},
					{
						name: "在建",
					},
					{
						name: "已竣工",
					},
				],
				current: 0,
				xmglArr: [],
				nowPage: '1',
				xmglstatus: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
			};
		},
		onLoad() {
			this.xmglList()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			this.nowPage++
			this.xmglstatus = 'loading'
			this.xmglList()
		},
		methods: {
			searchList(){
				this.xmglArr = []
				this.nowPage = 1
				this.xmglList()
			},
			xmglList() {
				xmglList({
						searchWord: this.keyword,
						pageNo: this.nowPage,
						pageSize: '10',
						projectStage: this.current,
						column: 'createTime',
						order: 'desc'
					})
					.then((res) => {
						this.xmglArr = [...this.xmglArr, ...res.data.result.records]
						if (res.data.result.records.length < 10) {
							this.xmglstatus = 'nomore'
						}
					})
			},
			change(e) {
				this.nowPage = 1
				this.xmglArr = []
				this.current = e;
				this.xmglList()
			},
			toJdxx() {
				uni.navigateTo({
					url: "/pages/zdxm/xmgl/jdxx/jdxx",
				});
			},
			toXq(X) {
				uni.navigateTo({
					url: "/pages/zdxm/xmgl/xq/xq?id="+ X.id,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.search_view{
		padding: 20rpx 24rpx;
		
	}
	.xmgl {
		padding-top: 20rpx;

		.tabs {
			margin-bottom: 20rpx;
		}

		.info {
			width: 710rpx;
			background: #ffffff;
			box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(48, 116, 255, 0.1);
			border-radius: 8rpx;
			margin: 0 auto;
			margin-bottom: 40rpx;
			padding: 40rpx 24rpx;

			.info_header {
				display: flex;
				flex-flow: row nowrap;
				justify-content: space-between;
				align-items: flex-start;

				view:nth-child(1) {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #272b32;
				}

				view:nth-child(2) {
					min-width: 120rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #3074ff;
					text-align: center;
					padding: 8rpx 0rpx;
				}
			}

			.itemChildren {
				border-top: 1rpx solid rgba(231, 233, 240, 1);
				margin-top: 20rpx;
			}

			.state {
				display: inline-block;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #ffffff;
				border-radius: 4rpx;
				padding: 8rpx 16rpx;
				margin-top: 20rpx;
			}

			.item {
				display: flex;
				flex-flow: row nowrap;
				justify-content: flex-start;
				align-items: center;
				margin-top: 18rpx;

				view:nth-child(1) {
					width: 160rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #8e9cb3;
				}

				view:nth-child(2) {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #272b32;
				}
			}
		}
	}
</style>
